<template>
  <div class="pd-20">
    <el-form :model="queryData">
      <el-form-item>
        <el-select v-model="queryData.companyId"
                   clearable
                   filterable
                   placeholder="所属公司">
          <el-option v-for="item in companyList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-input v-model="queryData.hospitalName"
                  class="w-200"
                  clearable
                  placeholder="网点名称"/>
        <el-date-picker
          v-model="signTimes"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="签约开始日期"
          end-placeholder="签约结束日期"
          @change="handleChangeTime()">
        </el-date-picker>
        <el-date-picker
          v-model="orderTimes"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="订单开始日期"
          end-placeholder="订单结束日期"
          @change="handleChangeTime">
        </el-date-picker>
      </el-form-item>

      <el-form-item>

        <el-select v-model="queryData.diseasePackageType"
                   class="w-200"
                   clearable
                   placeholder="签约包类型"
                   @change="handleChangeTime">
          <el-option v-for="item in packageTypeList"
                     :key="item.status"
                     :label="item.name"
                     :value="item.status">
          </el-option>
        </el-select>

        <el-button type="primary"
                   @click="handleSelect">查询
        </el-button>
        <el-button type="primary"
                   @click="handleExport">导出
        </el-button>
      </el-form-item>
    </el-form>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:surplusFee="{row}">
        <el-tag type="success" v-if="row.surplusFee>0">{{row.surplusFee}}</el-tag>
        <el-tag type="danger" v-else>{{row.surplusFee}}</el-tag>
      </template>

    </element-table>
  </div>
</template>

<script>
import ElementTable from "../../../base/ElementTable";

export default {
  name: "diseaseBill",
  data() {
    return {
      queryData: {
        companyId: '',
        hospitalName: '',
        signTimeStart: '',
        signTimeEnd: '',
        payTimeStart: '',
        payTimeEnd: '',
        diseasePackageType: '',
        searchType: 5,
      },
      companyList: [],
      signTimes: [],//签约时间
      orderTimes: [],//签约时间
      typeList: [
        {name: '用户下单', status: 1},
        {name: '医生/店员代下单', status: 2},
      ],
      packageTypeList: [
        {name: '个人类-特价T配', status: 1},
        {name: '个人类-精品U选', status: 2},
        {name: '家庭类-特价T配', status: 3},
        {name: '家庭类-精品U选', status: 4},
      ],
      tableData: [],
      loading: false,
      pageTotal: 0,
      pageSize: 20,
      pageIndex: 1,
      columns: [
        {
          label: '订单编号',
          prop: 'orderNumber',
          align: "center",
        }, {
          label: '下单时间',
          prop: 'payTime',
          align: "center",
          formatter: (row, cellValue) => {
            return this.formatterDate(row.payTime)
          },
        }, {
          label: '签约时间',
          prop: 'signTime',
          align: "center",
          formatter: (row, cellValue) => {
            return this.formatterDate(row.signTime)
          },
        }, {
          label: '订单所属公司',
          prop: 'companyName',
          align: "center",
        }, {
          label: '所属网点',
          prop: 'hospitalName',
          align: "center",
        }, {
          label: '订单类型',
          prop: 'diseasePackageType',
          align: "center",
          formatter: (row, cellValue) => {
            return this.filterType(row.diseasePackageType)
          },
        }, {
          label: '套餐包名称',
          prop: 'diseasePackageName',
          align: "center",
        }, {
          label: '套餐包单月价格',
          prop: 'diseasePackagePrice',
          align: "center"
        }, {
          label: '签约月份',
          prop: 'month',
          align: "center"
        }, {
          label: '订单总价',
          prop: 'totalPrice',
          align: "center"
        }, {
          label: '签约店员',
          prop: 'hospitalUserName',
          align: "center"
        }, {
          label: '签约客户',
          prop: 'userName',
          align: "center"
        }, {
          label: '订金收入',
          prop: 'depositFee',
          align: "center"
        }, {
          label: '奖金支出',
          prop: 'bonusFee',
          align: "center"
        }, {
          label: '服务费',
          prop: 'diseasePackageServiceFee',
          align: "center"
        }, {
          label: '结余',
          prop: 'surplusFee',
          align: "center",
          isSlot: true
        }
      ]
    }
  },
  created() {
    this.getCompanyList()
    this.getList()
  },
  methods: {
    handleSelect() {
      this.pageIndex = 1
      this.getList()
    },
    //导出
    handleExport(){
      this.commonFunction.exportFileData(this.queryData, this.api.withdraw.exportAdminOrder, '慢病专病对账', '.xlsx')
    },
    handleChangeTime() {
      if (this.signTimes && this.signTimes.length > 0) {
        this.queryData.signTimeStart = this.signTimes[0]
        this.queryData.signTimeEnd = this.signTimes[1]
      } else {
        this.queryData.signTimeStart = ''
        this.queryData.signTimeEnd = ''
      }
      if (this.orderTimes && this.orderTimes.length > 0) {
        this.queryData.payTimeStart = this.orderTimes[0]
        this.queryData.payTimeEnd = this.orderTimes[1]
      } else {
        this.queryData.payTimeStart = ''
        this.queryData.payTimeEnd = ''
      }
      this.pageIndex = 1
      this.getList()
    },
    //查询公司
    getCompanyList() {
      this.post(this.api.company.companyList, {
        name: '',
        status: 1,
        pageIndex: 0,
        pageSize: 200
      }).then((res) => {
        if (res.data.code === '200') {
          this.companyList = res.data.object
        }
      })
    },
    getList() {
      this.loading = true
      this.post(this.api.withdraw.getAdminOrderList, {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1,
        ...this.queryData
      }).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum;
        }
      })
    },
    // 时间转换
    formatterDate(time) {
      if (time)
        return this.commonFunction.timestampFormat(new Date(time), 'yyyy-MM-dd hh:mm')
      else
        return ''
    },
    filterType(type) {
      switch (type) {
        case 1:
          return '个人类-特价T配'
          break
        case 2:
          return '个人类-精品U选'
          break
        case 3:
          return '家庭类-特价T配'
          break
        case 4:
          return '家庭类-精品U选'
          break
      }
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  },
  components: {
    'element-table': ElementTable
  },
}
</script>

<style scoped>

</style>
